<template>
  <div class="analysis">
    <h2 class="analy-title">{{$t('message.zbtj')+':'}}</h2>
    <el-radio-group
      v-model="changeIndex"
      class="analy-radio"
      v-for="(item,index) in analysis"
      :key="index"
      @change="analySelects($event,'totalType')"
    >
      <el-radio class="radio-items" :label="item.value">{{item.label}}</el-radio>
    </el-radio-group>
    <h2 class="analy-title">{{$t('message.sxx')+':'}}</h2>
    <div class="analy-bottom">
      <div class="analy-select">
        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-form-inline"
        >
          <el-row>
            <el-col>
              <el-form-item :label="$t('message.zxsj')+':'" prop="executeTime" class="lang-item">
                <el-date-picker
                  v-model="ruleForm.executeTime"
                  type="daterange"
                  :range-separator="$t('message.to')"
                  :start-placeholder="$t('message.p-starM')"
                  :end-placeholder="$t('message.p-endM')"
                  value-format="yyyy-MM-dd"
                  @change="dateList"
                ></el-date-picker>
              </el-form-item>

              <el-form-item
                :label="$t('message.jnw')+':'"
                prop="jnw"
                v-if="changeIndex==='SECTION_TOTAL'||changeIndex==='INDUSTRY_TOTAL'"
                class="lang-item"
              >
                <el-select
                  v-model="ruleForm.jnw"
                  clearable
                  @change="analySelects($event,'border')"
                  :placeholder="$t('message.xzjnw')"
                >
                  <el-option
                    v-for="(v,i) in analySelect"
                    :key="i"
                    :label="v.label"
                    :value="v.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                :label="$t('message.xsjb')+':'"
                prop="class"
                v-if="changeIndex==='INDUSTRY_TOTAL'"
                class="lang-item"
              >
                <el-select
                  v-model="ruleForm.class"
                  clearable
                  @change="analySelects($event,'industryLevel')"
                  :placeholder="$t('message.xzdj')"
                >
                  <el-option v-for="(v,i) in classList" :key="i" :label="v.label" :value="v.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="changeIndex==='REGION_TOTAL'"
                :label="$t('message.xzdq')+':'"
                prop="region"
                class="lang-item"
              >
                <el-select
                  v-model="ruleForm.region"
                  clearable
                  @change="analySelects($event,'region')"
                  :placeholder="$t('message.xzdq')"
                >
                  <el-option v-for="(v,i) in cityList" :key="i" :label="v.label" :value="v.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="changeIndex==='REGION_TOTAL'"
                :label="$t('message.tjwd')+':'"
                prop="chinaEnterprise"
                class="lang-item"
              >
                <el-select
                  v-model="ruleForm.chinaEnterprise"
                  clearable
                  @change="analySelects($event,'chinaEnterprise')"
                  :placeholder="$t('message.p-tjwd')"
                >
                  <el-option v-for="(v,i) in veidooList" :key="i" :label="v.label" :value="v.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('message.jelx')+':'" prop="money" class="lang-item">
                <el-select
                  v-model="ruleForm.money"
                  clearable
                  @change="analySelects($event,'totalMoneyType')"
                  :placeholder="$t('message.qxzje')"
                >
                  <el-option v-for="(v,i) in moneyType" :key="i" :label="v.label" :value="v.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="downloads">
      <el-button @click="downloads('ruleForm')" type="primary">{{$t('message.down')}}</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import envCfg from "@/assets/js/env";
export default {
  data() {
    return {
      changeIndex: "SECTION_TOTAL",
      analysisList: {
        totalType: "SECTION_TOTAL", //统计类别
        startTime: "", //开始时间
        endTime: "", //结束时间
        border: "", //境内外
        totalMoneyType: "", //金额类型
        region: "", //地区
        industryLevel: "" //级别
      },
      // 模板列表
      analysis: [
        {
          label: this.$t("message.amktj"),
          value: "SECTION_TOTAL"
        },
        {
          label: this.$t("message.agbtj"),
          value: "COUNTRY_TOTAL"
        },
        {
          label: this.$t("message.ahylb"),
          value: "INDUSTRY_TOTAL"
        },
        {
          label: this.$t("message.adqtj"),
          value: "REGION_TOTAL"
        },
        {
          label: this.$t("message.ydylgjtj"),
          value: "YDYL_COUNTRY_TOTAL"
        },
        {
          label: this.$t("message.qb"),
          value: "ALL_TABLE_TOTAL"
        }
      ],
      // 统计分析境内外选择
      analySelect: [
        {
          label: this.$t("message.qb"),
          value: "all"
        },
        {
          label: this.$t("message.jn"),
          value: "within"
        },
        {
          label: this.$t("message.jw"),
          value: "overseas"
        }
      ],
      //   金额类型
      moneyType: [
        {
          label: this.$t("message.je"),
          value: "money"
        },
        {
          label: this.$t("message.ynnndje"),
          value: "money_year"
        }
      ],
      //   等级列表
      classList: [
        {
          label: this.$t("message.yiji"),
          value: "1"
        },
        {
          label: this.$t("message.erji"),
          value: "2"
        },
        {
          label: this.$t("message.sanji"),
          value: "3"
        }
      ],
      //地区列表
      cityList: [
        {
          label: this.$t("message.beijing"),
          value: "beijing"
        },
        {
          label: this.$t("message.qbsf"),
          value: "province"
        }
      ],
      //   统计维度
      veidooList: [
        {
          label: this.$t("message.bhzfqy"),
          value: "china"
        },
        {
          label: this.$t("message.jtjlddq"),
          value: "original"
        }
      ],
      ruleForm: {
        money: "", //金额类型
        executeTime: "", //执行时间
        jnw: "", //境内外
        class: "", //等级
        region: "", //地区
        chinaEnterprise: "" //中方企业地址
      },
      rules: {
        chinaEnterprise: [
          {
            required: true,
            message: this.$t("message.p-tjwd"),
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: this.$t("message.qxzje"),
            trigger: "blur"
          }
        ],
        executeTime: [
          {
            required: true,
            message: this.$t("message.xzzxsj"),
            trigger: "change"
          }
        ],
        jnw: [
          {
            required: true,
            message: this.$t("message.xzjnw"),
            trigger: "blur"
          }
        ],
        class: [
          {
            required: true,
            message: this.$t("message.xzdj"),
            trigger: "blur"
          }
        ],
        region: [
          {
            required: true,
            message: this.$t("message.xzdq"),
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    // this.analyList();
  },
  mounted() {},
  methods: {
    dateList(e) {
      //时间选择框
      this.analysisList.startTime = e[0];
      this.analysisList.endTime = e[1];
    },

    analySelects(e, type) {
      //状态改变
      this.analysisList = {
        ...this.analysisList,
        [type]: e
      };
      console.log(this.analysisList);
    },

    downloads(formName) {
      // 下载
      console.log(this.analysisList);
      this.$refs[formName].validate(valid => {
        if (valid) {
          window.open(
            `/api/poi/statisticDataExportExcel/?totalType=${this.analysisList.totalType}&startTime=${this.analysisList.startTime}&endTime=${this.analysisList.endTime}&border=${this.analysisList.border}&totalMoneyType=${this.analysisList.totalMoneyType}&region=${this.analysisList.region}&industryLevel=${this.analysisList.industryLevel}&chinaEnterprise=${this.analysisList.chinaEnterprise}`
          );
          this.$message.success("提交成功！");
        } else {
          this.$message.error("提交失败！");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.analysis {
  background: #fff;

  height: 100%;
  padding-left: 60px;
}

.analy-title {
  line-height: 80px;
}

.radio-items {
  margin-left: 40px;
  font-size: 20px;
}

.analy-bottom {
  display: flex;
}

.lang-item {
  margin-left: 30px;
  font-size: 16px;
}

.analy-select {
  font-size: 16px;
}

.downloads {
  margin-top: 80px;
  text-align: center;
}
</style>
